<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
 
 
</head>

<body>

    <div id="sss" style="width: 100%;overflow:auto">
        <h2>订单列表</h2>
    <table border="1" class="table-condensed" style="width:2570px">
        <tr>
            <td>ID</td>
            <td>提名</td>
            <td>订购机制</td>
            <td>年份</td>
            <td>代理公司</td>
            <td>支付金额</td>
            <td>是否到货</td>
            <td>预估金额</td>
            <td>结算金额</td>
            <td>补款金额</td>
            <td>数据库支持</td>
            <td>载体</td>
            <td>订购类型</td>
            <td>审核状态</td>
            <td>代理公司户口号ID</td>
            <td>经费支持</td>
            <td>是否顶到</td>
            <td>外币价格</td>
            <td>退款金额</td>
            <td>开通范围</td>
            <td>印本订购方式id</td>
            <td>创建日期</td>
            <td>修改日期</td>
            <td>停续订</td>
        </tr>
        <tr v-for="li in list" >
            <td>{{li.id}}</td>
            <td>{{li.title}}</td>
            <td>{{li.orderOrganization}}</td>
            <td>{{li.orderYear}}</td>
            <td>{{li.agencyCompanyId}}</td>
            <td>{{li.pay}}</td>
            <td>{{li.isArrival}}</td>
            <td>{{li.estimatedAmount}}</td>
            <td>{{li.settlementPrice}}</td>
            <td>{{li.fillingMoney}}</td>
            <td>{{li.databaseSupport}}</td>
            <td>{{li.carrier}}</td>
            <td>{{li.orderType}}</td>
            <td>{{li.reviewStatus}}</td>
            <td>{{li.doorNoId}}</td>
            <td>{{li.financialSupportId}}</td>
            <td>{{li.isOrder}}</td>
            <td>{{li.foreignPrice}}</td>
            <td>{{li.returnPrice}}</td>
            <td>{{li.openRange}}</td>
            <td>{{li.printerMethodId}}</td>
            <td>{{li.createDate}}</td>
            <td>{{li.updateDate}}</td>
            <td><button v-on:click="tingding(li.id,0)">停订</button> | <button v-on:click="tingding(li.id,1)">续订</button></td>
        </tr>
    </table>
</div>
</body>
</html>

<script>
    
    new Vue({
        el:"#sss",
        created(){      //自动调用
            this.getAllList();
        },
        data:{          //定义参数
            name:"",
            list:[]
        },    
        methods: {      //定义方法
            tingding(id,e){
                alert("续停订");
                axios.post("http://29n01o8660.oicp.vip/server/Order/updateState/id="+id+" & stater="+e);
            },
            getAllList(){
            axios.post('http://29n01o8660.oicp.vip/server/Order/findAll')
                 .then(response=>(this.list=response.data))
        }
    }
    });
</script>